<template>
	<view>
		<mSearch @search="search($event,3)"></mSearch>
		<view v-show="isShow" class="start_serach">找找你想要的商品</view>
		<view v-if="this.googList==null" class="no_goods">
			<h3>抱歉！暂未搜索到哦！</h3>
		</view>
		<view v-else>
			<view class="content">
				<label v-for="(item, index) in googList" :key="index">
					<a @click="Detail(item.product_id)">
						<view class="list">
							<view class="left">
								<image :src="item.product_picture" class="image"></image>
							</view>
							<view class="right">
								<view class="name">
									{{item.product_name}}
								</view>
								<view class="price">
									价格：{{item.price}}元
								</view>
								<view class="title">
									详情：{{item.product_title}}元
								</view>
							</view>
						</view>
					</a>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	export default {
		components: {
			mSearch
		},
		data() {
			return {
				val3: '',
				googList: "",
				isShow:true
			}
		},
		methods: {
			Detail(product_id) {
				uni.navigateTo({
					url: "../../pages/index/detail?product_id=" + product_id,
				});
			},
			search(e, val) {
				this['val' + val] = e;
				const url = 'http://localhost:3001/' //地址
				uni.request({
					url: '/api/shop/searchGoods',
					data: {
						product_name: this.val3
					},
					method: 'POST',
					success: (res) => {
						let arr = res.data
						if (Array.isArray(arr)) {
							arr.map(item => {
								item.product_picture = `${url}${item.product_picture}`
							})
						}
						if (res.data.length) {
							this.googList = res.data
							this.isShow=false
						} else {
							this.googList = null
							this.isShow=false
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.start_serach,
	.no_goods {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.start_serach {
		color: #A5A5A5;
		font-size: 15px;
		font-weight: bold;
	}

	.content {
		width: 700rpx;
		margin: 0 auto 180rpx;
		font-weight: bold;
	}

	.list {
		width: 710rpx;
		height: 210rpx;
		background: #f9f9f9;
		box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
		border-radius: 24rpx;
		margin-top: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.left {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.image {
		width: 136rpx;
		height: 136rpx;
		border-radius: 8%;
	}
</style>
